﻿@{
    ViewData["Title1"] = "Yield";
}
<style type="text/css">

    .normal-row {
        /*height: 25%;*/
        /*width: 100px;*/
    }

    table {
        width: 99.9%;
        height: 99.9%;
    }

    td {
/*        border: red;
        border-width: 2px;
        border-style: solid;*/
    }

/*    body {
        background-image: url("bg1.png");
        background-color: currentColor;
    }*/


    .bigtitle {
        height: 5px;
        font-size: 28px;
        color: #d7e4ff;
        text-align: center;
        font-family: 'Microsoft YaHei UI'
    }

    .title {
        height: 1px;
        font-size: 20px;
        color: #d7e4ff;
        text-align: center;
        font-family: 'Microsoft YaHei UI'
    }

    .big-row {
        height: 10%;
    }

    .fixcell-wide {
        width: 100%;
        height: 230px;
    }

    .fixcell-normal {
        width: 100%;
        height: 180px;
    }

    .middleDoubleLine {
        border-right: 5px solid #0d4da2;
    }
</style>
@*<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>*@
<script src="/echarts/echarts.js"></script>
<script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
<table style="width: 100%; table-layout:fixed">
    <tr class="normal-row">
        <td class="bigtitle" colspan="6" style="">昨日产量完成率</td>
    </tr>

    @*===================汇总行==================== *@
    <tr class="big-row" style="        border-bottom: 5px solid #0d4da2;">
        <td colspan="2">
            <div class="fixcell-wide" id="c1" />
        </td>
        <td colspan="2">
            <div class="fixcell-wide" id="c2" />
        </td>
        <td colspan="2">
            <div class="fixcell-wide" id="c3" />
        </td>
    </tr>

    @*=================== 标题行 ==================== *@
    <tr class="normal-row">
        <td colspan="3" class="title" style="        border: none;
        border-right: 5px solid #0d4da2;">一科</td>
        <td colspan="3" class="title">二科</td>
    </tr>

    @*=================== 一科 班次 别 ==================== *@
    <tr class="big-row" style="border-bottom: thick dotted #21ac5b;">
        <td>
            <div class="fixcell-normal" id="d1" />
        </td>
        <td>
            <div class="fixcell-normal" id="d2" />
        </td>
        <td class="middleDoubleLine">
            <div class="fixcell-normal" id="d3" />
        </td>

        @*=================== 二科 班次 别 ==================== *@
        <td>
            <div class="fixcell-normal" id="d4" />
        </td>
        <td>
            <div class="fixcell-normal" id="d5" />
        </td>
        <td>
            <div class="fixcell-normal" id="d6" />
        </td>
    </tr>

    <tr class="big-row">
        @*=================== 一科 机品牌 组 ==================== *@
        <td>
            <div class="fixcell-normal" id="e1" />
        </td>
        <td>
            <div class="fixcell-normal" id="e2" />
        </td>
        <td class="middleDoubleLine">
            <div class="fixcell-normal" id="e3" />
        </td>

        @*=================== 二科 机品牌 组 ==================== *@
        <td>
            <div class="fixcell-normal" id="e4" />
        </td>
        <td></td><!--留空-->
        <td>
            <div class="fixcell-normal" id="e5" />
        </td>
    </tr>
    <tr class="big-row" style="border-bottom: 5px solid #0d4da2;" >
        @*=================== 一科 机品牌 组 ==================== *@
        <td>
            <div class="fixcell-normal" id="f1" />
        </td>

        <td></td><!--留空-->
        <td class="middleDoubleLine">
            <div class="fixcell-normal" id="f2" />
        </td>

        @*=================== 二科 机品牌 组 ==================== *@
        <td><div class="fixcell-normal" id="f3" /></td>
        <td>&nbsp;5</td><!--留空-->
        <td><div class="fixcell-normal" id="f4" /></td>
    </tr>
</table>
<script type="text/javascript">

    setTimeout(getChartData, 300);

    setInterval(getChartData, 15000);

    var CtSlots = new Array(18);
    CtSlots[0] = echarts.init($("#c1")[0]);
    CtSlots[1]= echarts.init($("#c2")[0]);
    CtSlots[2]= echarts.init($("#c3")[0]);
    CtSlots[3]= echarts.init($("#d1")[0]);
    CtSlots[4]= echarts.init($("#d2")[0]);
    CtSlots[5]= echarts.init($("#d3")[0]);
    CtSlots[6]= echarts.init($("#d4")[0]);
    CtSlots[7]= echarts.init($("#d5")[0]);
    CtSlots[8]= echarts.init($("#d6")[0]);
    CtSlots[9] = echarts.init($("#e1")[0]);
    CtSlots[10] = echarts.init($("#e2")[0]);
    CtSlots[11] = echarts.init($("#e3")[0]);
    CtSlots[12] = echarts.init($("#e4")[0]);
    CtSlots[13] = echarts.init($("#e5")[0]);
    CtSlots[14] = echarts.init($("#f1")[0]);
    CtSlots[15] = echarts.init($("#f2")[0]);
    CtSlots[16] = echarts.init($("#f3")[0]);
    CtSlots[17] = echarts.init($("#f4")[0]);

    //var CtK2AC = echarts.init($("d4"));
    //var CtK2BC = echarts.init($("d5"));
    //var CtK2CC = echarts.init($("d6"));


    function getChartData() {

        $.ajax({
            type: "post",
            async: false,
            url: "/Yield/GetAllCharts",
            // 发回去后台， 已经是 多余的了, 领导说不需要，在页面上 可修改。
            data: {},
            dataType: "json",
            error: function (errorMsg) { /*alert("请求数据失败" + errorMsg);*/ },
            success: function (result) {

                //JS枚举
                var RateType = {
                    sumRate: 0,
                    k1sum: 1,
                    k2sum: 2,
                    k1AShift: 3,
                    k1BShift: 4,
                    k1CShift: 5,
                    k2AShift: 6,
                    k2BShift: 7,
                    k2CShift: 8,
                    k1BrandTZ: 9,
                    k1BrandRT: 10,
                    k1BrandYC: 11,
                    k2BrandTZ: 12,
                    k2BrandYC: 13,
                    k1BrandAllmaCC3T: 14,
                    k1BrandAllmaCC3: 15,
                    k2BrandAllmaCC3T: 16,
                    k2BrandAllmaCC4: 17
                };



                //这个顺序 千万别改，跟表格行是一一对应的。
                var ChartDT =
                    [
                        { name: "总计", data: result.sumRate, color: '#6ff876' },
                        { name: "一科", data: result.k1sum, color: '#487AF7' },
                        { name: "二科", data: result.k2sum, color: '#FCFE14' },
                        { name: "早班", data: result.k1AShift, color: '#F566FC' },
                        { name: "中班", data: result.k1BShift, color: '#79F6FA' },
                        { name: "晚班", data: result.k1CShift, color: '#6ff876' },
                        { name: "早班", data: result.k2AShift, color: '#F566FC' },
                        { name: "中班", data: result.k2BShift, color: '#79F6FA' },
                        { name: "晚班", data: result.k2CShift, color: '#6ff876' },

                        { name: "天竺", data: result.k1BrandTZ, color: '#A0A3BC' },
                        { name: "力达", data: result.k1BrandRT, color: '#40D2FB' },
                        { name: "宜昌", data: result.k1BrandYC, color: '#F9ACD8' },

                        { name: "天竺", data: result.k2BrandTZ, color: '#A0A3BC' },
                        { name: "宜昌", data: result.k2BrandYC, color: '#F9ACD8' },

                        { name: "AllmaCC3T", data: result.k1BrandAllmaCC3T, color: '#7488EA' },
                        { name: "AllmaCC3", data: result.k1BrandAllmaCC3, color: '#F7B954' },

                        { name: "AllmaCC3T", data: result.k2BrandAllmaCC3T, color: '#7488EA' },
                        { name: "AllmaCC4", data: result.k2BrandAllmaCC4, color: '#F7B954' },
                    ];

                var CsumOpt = new Array(ChartDT.length);

                //=============测试 不存在 中时 隐藏掉==============
                //ChartDT[RateType.k1BShift].data[0].value = -1;
                //ChartDT[RateType.k2BShift].data[0].value = -1;

                //主要的3个 图表
                for (var i = 0; i < 3; i++) {
                    var UptimeRate = ChartDT[i].data[0].value * 100;

                    if (i==RateType.k1BShift&& ChartDT[RateType.k1BShift].data[0].value < 0) {
                        continue;
                    }
                    if (i == RateType.k2BShift && ChartDT[RateType.k2BShift].data[0].value < 0) {
                        continue;
                    }
                    CsumOpt[i] = {
                            color: [ChartDT[i].color, '#133764', 'lightgreen', 'lightgray', '#d48265', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                            title: {
                                text: ChartDT[i].name,
                                left: 'center',
                                top: '83%',
                                textStyle: {
                                    //文字颜色
                                    color: '#eee',
                                    //字体风格,'normal','italic','oblique'
                                    fontStyle: 'normal',
                                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                    fontWeight: 'normal',
                                    //字体系列
                                    fontFamily: '微软雅黑',
                                    //字体大小
                                    fontSize: 26
                                }
                            },
                            tooltip: {
                                show: false
                                //formatter: '{a} <br/>{b}: {d}%'
                            },
                            graphic: [{ //环形图中间添加文字
                                type: 'text', //通过不同top值可以设置上下显示
                                left: 'center',
                                top: '37%',
                                style: {
                                    text: UptimeRate.toFixed(1) + "%",
                                    textAlign: 'center',
                                    fill: 'lightgreen', //文字的颜色
                                    width: 30,
                                    height: 20,
                                    fontSize: 30,
                                    fontFamily: "Microsoft YaHei"
                                }
                            }
                            ]
                            ,
                            series: [
                                {
                                    animation: true,
                                    name: ChartDT[i].name,
                                    type: 'pie',
                                    radius: ['45%', '75%'],
                                    center: ['50%', '42%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center',
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: ChartDT[i].data
                                    ,

                                    animationDuration: 700,
                                    animationDelay: function (idx) {
                                        return 100;
                                    },
                                    animationDurationUpdate: function (idx) {
                                        // 越往后的数据时长越大
                                        return 100;
                                    },
                                    animationDelayUpdate: function (idx) {
                                        // 越往后的数据延迟越大
                                        return 100;
                                    }
                                },
                                //{
                                //    name: '背景图',
                                //    type: 'pie',
                                //    radius: ['0', '35%'],
                                //    center: ['50%', '42%'],
                                //    label: {
                                //        position: 'center',
                                //        fontSize: 20,
                                //    },
                                //    labelLine: {
                                //        show: false
                                //    },
                                //    data: [
                                //        { value: 100, name: '背景' }
                                //    ]
                                //}
                            ]
                        };
                    CtSlots[i].setOption(CsumOpt[i]);
                }

                //其他图表
                for (var i = 3; i < ChartDT.length; i++) {
                    var UptimeRate = ChartDT[i].data[0].value * 100;

                    if (i == RateType.k1BShift && ChartDT[RateType.k1BShift].data[0].value < 0) {
                        continue;
                    }
                    if (i == RateType.k2BShift && ChartDT[RateType.k2BShift].data[0].value < 0) {
                        continue;
                    }

                    CsumOpt[i] = {
                        color: [ChartDT[i].color, '#133764', 'lightgreen', 'lightgray', '#d48265', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                        title: {
                            text: ChartDT[i].name,
                            left: 'center',
                            top: '86%',
                            textStyle: {
                                //文字颜色
                                color: '#eee',
                                //字体风格,'normal','italic','oblique'
                                fontStyle: 'normal',
                                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                fontWeight: 'normal',
                                //字体系列
                                fontFamily: '微软雅黑',
                                //字体大小
                                fontSize: 20
                            }
                        },
                        tooltip: {
                            show: false
                            //formatter: '{a} <br/>{b}: {d}%'
                        },
                        graphic: [{ //环形图中间添加文字
                            type: 'text', //通过不同top值可以设置上下显示
                            left: 'center',
                            top: '42%',
                            style: {
                                text: UptimeRate.toFixed(1) + "%",
                                textAlign: 'center',
                                fill: 'lightgreen', //文字的颜色
                                width: 30,
                                height: 20,
                                fontSize: 26,
                                fontFamily: "Microsoft YaHei"
                            }
                        }
                        ]
                        ,
                        series: [
                            {
                                animation: true,
                                name: ChartDT[i].name,
                                type: 'pie',
                                radius: ['45%', '75%'],
                                center: ['50%', '47%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center',
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                },
                                labelLine: {
                                    show: false
                                },
                                data: ChartDT[i].data
                                ,

                                animationDuration: 700,
                                animationDelay: function (idx) {
                                    return 100;
                                },
                                animationDurationUpdate: function (idx) {
                                    // 越往后的数据时长越大
                                    return 100;
                                },
                                animationDelayUpdate: function (idx) {
                                    // 越往后的数据延迟越大
                                    return 100;
                                }
                            }
                        ]
                    };
                    CtSlots[i].setOption(CsumOpt[i]);
                }

                    //sumRate: 0,
                    //k1sum: 1,
                    //k2sum: 2,
                    //k1AShift: 3,
                    //k1BShift: 4,
                    //k1CShift: 5,
                    //k2AShift: 6,
                    //k2BShift: 7,
                    //k2CShift: 8,
                    //k1BrandTZ: 9,
                    //k1BrandRT: 10,
                    //k1BrandYC: 11,
                    //k2BrandTZ: 12,
                    //k2BrandYC: 13,
                    //k1BrandAllmaCC3T: 14,
                    //k1BrandAllmaCC3: 15,
                    //k2BrandAllmaCC3T: 16,
                    //k2BrandAllmaCC4: 17


                //Ct1.setOption(CsumOpt[RateType.sumRate]);
                //Ct2.setOption(CsumOpt[RateType.k1sum]);
                //Ct3.setOption(CsumOpt[RateType.k2sum]);
                //Ct4.setOption(CsumOpt[RateType.k1AShift]);
                //Ct5.setOption(CsumOpt[RateType.k1BShift]);
                //Ct6.setOption(CsumOpt[RateType.k1CShift]);

                //Ct7.setOption(CsumOpt[RateType.k2AShift]);
                //Ct8.setOption(CsumOpt[RateType.k2BShift]);
                //Ct9.setOption(CsumOpt[RateType.k2CShift]);
                //Ct10.setOption(CsumOpt[RateType.k1BrandTZ]);
                //Ct11.setOption(CsumOpt[RateType.k1BrandRT]);
                //Ct12.setOption(CsumOpt[RateType.k1BrandYC]);
                //Ct13.setOption(CsumOpt[RateType.k2BrandTZ]);
                //Ct14.setOption(CsumOpt[RateType.k2BrandYC]);
                //Ct15.setOption(CsumOpt[RateType.k1BrandAllmaCC3T]);
                //Ct16.setOption(CsumOpt[RateType.k1BrandAllmaCC3]);
                //Ct17.setOption(CsumOpt[RateType.k2BrandAllmaCC3T]);
                //Ct18.setOption(CsumOpt[RateType.k2BrandAllmaCC4]);


            }
        });

    }

</script>
